import Vue from 'vue'
//快捷键newx
import Vuex from 'vuex';

Vue.use(Vuex);
// getToken第二次访问就可以直接拿到token了？
import { setToken, getToken, removeToken } from '@/utils/auth';//导入才能用存token的本地存储js变量
import { userInfoAPI } from '@/api';


const store = new Vuex.Store({
    //放数据变量的地方
    state: {
        //{}空对象是考虑用户第一次登录没有getToken 
        tokenObj: getToken() || {}, //因为是return出来的getToken，需要加括号  
        //保存用户信息的变量（如头像）
        userInfo: {}
    },


    //放方法的地方
    //mutations对应vue里的commit，可以拿到本页面的state参数（第一个参数），可以拿到外面vue的参数（第二个参数）
    mutations: {//这个mutations只能写同步函数
        //两个参数绑定两个地方数据//state对应上面||payload固定参数，对应外面的vue参数
        saveToken(state, payload) {//保存token
            state.tokenObj = payload //res拿到的token存到vuex
            setToken(payload); //存到本地存储 （非实时更新数据）
        },

        setUserInfo(state, payload) {//修改用户个人信息接收点,payload对应上面的state,要求要对象
            state.userInfo = payload
        },

        //清空vuex里的及locations里的(退出登录功能)
        logout(state) {
            //清空Vuex的token
            state.tokenObj = {}
            //清空本地存储了
            removeToken()
            //清空Vuex的userInfo
            state.userInfo = {}
        }
    },
    actions: {
        async reqUserInfo(context) { //context当前实例对象里的如mutations、state
            if (!context.state.userInfo.name) {//如果context.state.userInfo没有用户信息
                // 发请求获取用户信息
                let res = await userInfoAPI();
                context.commit("setUserInfo", res.data.data); //保存到vuex里
            }
        }
    }
});

export default store